<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <canvas id="mycanvas" width="500px" height="400px" style="border: 1px solid #ccc"></canvas>
 <canvas id="mycanvas2" width="500px" height="400px" style="border: 1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
 var canvas = document.getElementById("mycanvas");
 var context = canvas.getContext("2d");
 context.beginPath();
 context.strokeStyle="ff0000";
 context.fillStyle="rgb(0,255,0)";
 context.rect(20,20,200,100);
 context.stroke();
 context.fill();

 context.fillStyle="#0000ff";
 context.fillRect(20,160,200,100);

</script>

<script type="text/javascript">
 var canvas2 = document.getElementById("mycanvas2");
 var context2 = canvas2.getContext("2d");
 context2.beginPath();
 context2.arc(95,50,40,Math.PI,Math.PI*2);
 context2.stroke();
</script>
